<style>
body {
  margin: 0;
  padding: 0;
}

.box {
  width: 100vw;
  height: 100vh;

}

.login {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 24px;
  position: relative;
  top: 120px;
  border-radius: 5px;
}

.login-content {
  margin-bottom: 20px;
}
</style>

<template>
  <div class="box">
    <div class="login">
      <div style="text-align: center;">
        <el-label style="font-size: 20px;">登 · 录修改</el-label>
      </div>

      <el-divider></el-divider>

      <div class="login-content">
        <el-tag size="mini">账号</el-tag>
        <el-input maxlength="11" v-model="account" placeholder="请输入账号">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </div>

      <div class="login-content">
        <el-tag size="mini">密码</el-tag>
        <el-input v-model="password" show-password placeholder="请输入密码">
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </div>

      <div>
        <el-button @click="login" type="primary" style="width: 100%;">登录</el-button>
      </div>

    </div>
  </div>

</template>

<script>
import { close_loading, open_loading } from '@/utils/message';
import { logins } from '@/api/login';
import { set_token } from '@/utils/auth';
import axios from 'axios';


export default {
  data: function () {
    return {
      account: '',
      password: ''
    }
  },

  methods: {
    async login() {
      open_loading("登录中...");

      axios.post('http://localhost:59399/api/login/logins', {
        account: this.account,
        password: this.password
      }).then((res) => {
          setTimeout(() => {
            close_loading();

            //从此处开始 变回同步
            if (res.data.code === 0) {
              set_token(res.data.data);
              this.$router.push('/');
            } else {
              this.$message.error(res.data.message);
            }
          }, 1000);
        })
        .catch({
          
        });

    }
  },
  components: {

  }
}
</script>